<template>
    <div>
        <div class="code-left">
            <el-card class="box-card" shadow="never">
                视频
            </el-card>
            <el-card id="code-panel" class="box-card" shadow="never">

                <div class="row">
                    <el-select v-model="codeLang" placeholder="请选择代码语言">
                        <el-option v-for="item in codeLangList" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </div>

                <div></div>
                <div class="code-panel-operation">
                    <el-input type="textarea" :rows="10" placeholder="请输入内容"></el-input>
                <span class="tips tips-block">测试程序：</span>
                    <div class="code-left">
                        <span class="tips tips-block">输入：</span>
                        <el-input type="textarea" :rows="3" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="code-right">
                        <span class="tips tips-block">输出：</span>
                        <el-input type="textarea" :rows="3" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="row">
                        <el-button plain>提交</el-button>
                        <el-button plain>测试运行</el-button>
                    </div>
                </div>
            </el-card>
            <el-card class="box-card" shadow="never">
                历史
            </el-card>
        </div>
        <div class="code-right">
            <el-card class="box-card" shadow="never">
                描述
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "el-code",
        props: {},
        data() {
            return {
                codeLang : 'JAVA',
                codeLangList : ['JAVA', 'python', 'C++', 'C#']
            }
        },
        computed: {},
        methods: {},
        created() {
        },
        mounted() {
        }
    }
</script>

<style lang="scss" scoped>

    .code-left{width: 50%;float: left;}
    .code-right{width: 50%;float: right;}
    .tips{display: inline-block;font-size: 18px;color: #000000;}
    .tips-block{display: block;}

    .box-card{
        margin: 10px 5px;
    }

    #code-panel{
        text-align: left;
        height: 500px;

        /*.code-panel-operation textarea{*/
        /*height: 100px;*/
        /*width: 90%;*/
        /*border-radius: 10px;*/
        /*margin: 5px 20px 5px 2px;*/
        /*}*/

    }

</style>
